<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编程式操作表</title>
  <script src="./js/jexcel.js"></script>
  <script src="./js/jsuites.js"></script>
  <link rel="stylesheet" href="./css/jsuites.css" type="text/css" />
  <link rel="stylesheet" href="./css/jexcel.css" type="text/css" />
</head>

<body>
  <h1>编程式操作表</h1>
  <p>为你的在线javascript电子表格定义宽度和高度。:</p>

  <h3>1：插入、删除和移动列和行</h3>
  <div id="spreadsheet"></div>
  <br>

  <ol class='example'>
    <li><a onclick="table1.insertColumn()">在表的末尾插入一个新的空白列</a></li>
    <li><a onclick="table1.insertColumn(5, 0, 1, null);">在表的开头插入5个新的空白列</a>
    </li>
    <li><a onclick="table1.insertColumn([ '0.99', '1.22', '3.11', '2.21' ]);">在表的末尾插入一个带有预填充值的新列</a></li>
    <li><a onclick="table1.insertRow()">在表的末尾插入一个新的空白行</a></li>
    <li><a onclick="table1.insertRow([ 'Pears', 10, 0.59, '=B2*C2' ], 1);">在第二行之后插入一个新的预填充行</a></li>
    <li><a onclick="table1.insertRow(10);">在表的末尾创建10行</a></li>
    <li><a onclick="table1.deleteRow(0, 1);">删除第一行</a></li>
    <li><a onclick="table1.deleteColumn();">删除最后一列</a></li>
    <li><a onclick="table1.moveRow(3, 0);">将第一行移动到第一个位置</a></li>
    <li><a onclick="table1.moveColumn(0, 2);">将第一列移动到第三个位置</a></li>
  </ol>

  <h3>2：更新列宽和行高</h3>
  <div id="spreadsheet2"></div>
  <div>
    <select id='columnNumber'>
      <option value='0'>Column 1</option>
      <option value='1'>Column 2</option>
      <option value='2'>Column 3</option>
      <option value='3'>Column 4</option>
    </select>

    <input type='button' value='设置列宽为200px'
      onclick="table2.setWidth(document.getElementById('columnNumber').value, 200)">
    <input type='button' value='设置第一行高度为100px' onclick="table2.setHeight(0, 100)">
  </div>
</body>

<script>
  // 1：插入、删除和移动列和行
  var data1 = [
    ['Cheese', 10, 1.10, '=B1*C1'],
    ['Apples', 30, 0.40, '=B2*C2'],
    ['Carrots', 15, 0.45, '=B3*C3'],
    ['Oranges', 20, 0.49, '=B4*C4'],
  ];

  var table1 = jspreadsheet(document.getElementById('spreadsheet'), {
    data: data1,
    columns: [
      {
        title: 'Product',
        type: 'autocomplete',
        source: ['Apples', 'Bananas', 'Carrots', 'Oranges', 'Cheese', 'Pears'],
        width: '300px',
      },
      {
        title: 'Quantity',
        type: 'number',
        width: '100px',
      },
      {
        title: 'Price',
        type: 'number',
        width: '100px',
      },
      {
        title: 'Total',
        type: 'number',
        width: '100px',
      },
    ],
    rowResize: true,
    columnDrag: true,
  });

  // 2：更新列宽和行高
  var data2 = [
    ['Cheese', 10, 1.10, '=B1*C1'],
    ['Apples', 30, 0.40, '=B2*C2'],
    ['Carrots', 15, 0.45, '=B3*C3'],
    ['Oranges', 20, 0.49, '=B4*C4'],
  ];

  var table2 = jspreadsheet(document.getElementById('spreadsheet2'), {
    data: data2,
    colHeaders: ['Product', 'Quantity', 'Price', 'Total'],
    colWidths: [300, 100, 100, 100],
    columns: [
      { type: 'autocomplete', source: ['Apples', 'Bananas', 'Carrots', 'Oranges', 'Cheese', 'Pears'] },
      { type: 'number' },
      { type: 'number' },
      { type: 'number' },
    ],
    rowResize: true,
  });
</script>

</html>